<template>
	<view class="content" >
	
	
		<view class='searchView' @click='goSearch()' v-bind:class="jdata.params.style" >
			<view class="search-input-p-c">
				{{jdata.params.keywords}}
			</view>
			<image class='iconsearch' src='/static/image/home/search.png'></image>
		</view>
	
		<!-- 搜索框 -->
		<!-- <view class="search search-fixed" v-show="searchFixed">
			<view class='search-c' @click='goSearch()' v-bind:class="jdata.params.style">
				<view class='search-input search-input-p'>
					<view class="search-input-p-c">
						{{jdata.params.keywords}}
					</view>
				</view>
				<image class='icon search-icon' src='/static/image/zoom.png'></image>
			</view>
		</view>	 -->
	</view>
</template>
<script>
	export default {
		name: "jshopsearch",
		props: {
			jdata:{
				// type: Object,
				required: true,
			}
		},
		data() {
			return {
				keyword:'',
				searchTop: 0,
				scrollTop: 0,
				searchFixed: this.$store.state.searchFixed||false
			};
		},
		
		created() {
			//#ifdef H5
			this.$nextTick(() => {
				this.searchTop = this.$refs.searchBar.$el.offsetTop;
			})
			// #endif
			this.searchStyle()
		},

		mounted() {
			// #ifdef H5
			window.addEventListener('scroll', this.handleScroll)
			// #endif
		},


		methods: {
			searchStyle (){
				this.$store.commit('searchStyle',this.jdata.params.style)
				// console.log(this.data.params.style)
			},
			goSearch() {
				uni.navigateTo({
					url: '/pages/index/search'
				});
			},
			handleScroll() {
				this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				this.scrollTop >= this.searchTop? this.searchFixed = true : this.searchFixed = false;
			},
		},
		/*
		 //失效
		 onPageScroll(){
			var _this = this;
			// #ifdef MP-WEIXIN || APP-PLUS || APP-PLUS-NVUE
			const query = uni.createSelectorQuery().in(this)
			  query.select('.search').boundingClientRect(function(res){
				if(res.top<0){
					_this.searchFixed = true ;
				}else{
					_this.searchFixed = false;
				}
			  }).exec()
			// #endif
		} */
	}
</script>

<style>
	
.content{
	
	position: absolute;
	
	width: 100%;
	
	height: 140upx;
	
	z-index: 999999;
	
	
}	

.searchView{
	
	margin-top: 36upx;
	
	margin-left: 36upx;
	
	width: 678upx;
	
	height: 88upx;
	
	background-color: rgba(255,255,255,0.8);
	
	display: flex;
	
	flex-direction: row;
	
	align-items: center;
	
	justify-content: space-between;
	
	
	border-radius: 5upx;
	
	
}

.search-input-p-c{
	
	margin-left: 36upx;
	
	color: #3A3A3A;
	
	font-size: 30upx;
	
	height: 88upx;
	
	line-height: 88upx;
	
	/* background-color: #007AFF; */
	
	
}

.iconsearch{
	
	width: 53upx;
	
	height: 53upx;
	
	margin-right: 45upx;
	
	
}


/* .isOpacity {
		background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
		transition: all .5s;
	}

.isOpacity .search-input {
	background-color: rgba(255, 255, 255, .5);
	transition: all .5s;
} */
</style>
